import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, MailOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Register.css';
import './Login.css'; // 引入基础样式

const Register = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = (values) => {
    setLoading(true);
    console.log('Received values:', values);
    
    // 模拟注册API请求
    setTimeout(() => {
      setLoading(false);
      message.success('注册成功!');
      navigate('/login'); // 注册成功后跳转到登录页
    }, 1500);
  };

  return (
    <div className="auth-container">
      {/* 左侧品牌展示区 */}
      <div className="auth-left">
        <h1 style={{ fontSize: '2.5rem', marginBottom: '1rem', zIndex: 1 }}>加入我们</h1>
        <p style={{ fontSize: '1.1rem', marginBottom: '2rem', zIndex: 1 }}>
          电子商城 开启便利生活
        </p>
        
        <div className="register-features">
          <div className="register-feature-item">
            <div className="feature-icon">
              <UserOutlined />
            </div>
            <div>
              <h3>海量商品随心选</h3>
              <p>多样品类一站式轻松浏览</p>
            </div>
          </div>
          <div className="register-feature-item">
            <div className="feature-icon">
              <LockOutlined />
            </div>
            <div>
              <h3>智能搜索更高效</h3>
              <p>快速定位所需好物省时省力</p>
            </div>
          </div>
          <div className="register-feature-item">
            <div className="feature-icon">
              <MailOutlined />
            </div>
            <div>
              <h3>便捷下单无烦恼</h3>
              <p>购物流程简洁顺畅一步到位</p>
            </div>
          </div>
        </div>
      </div>

      {/* 右侧表单区 */}
      <div className="auth-right">
        <div className="auth-card">
          <img 
            src="https://png.pngtree.com/png-clipart/20190903/original/pngtree-store-icon-png-image_4419850.jpg" 
            alt="Logo" 
            className="auth-logo" 
          />
          <h2 className="auth-title">用户注册</h2>
          
          <Form
            name="register-form"
            className="auth-form"
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input 
                prefix={<UserOutlined />} 
                placeholder="用户名" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="email"
              rules={[
                { required: true, message: '请输入邮箱!' },
                { type: 'email', message: '请输入有效的邮箱地址!' }
              ]}
            >
              <Input 
                prefix={<MailOutlined />} 
                placeholder="邮箱" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="phone"
              rules={[{ required: true, message: '请输入手机号!' }]}
            >
              <Input 
                prefix={<PhoneOutlined />} 
                placeholder="手机号" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password 
                prefix={<LockOutlined />} 
                placeholder="密码" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item
              name="confirm"
              dependencies={['password']}
              rules={[
                { required: true, message: '请确认密码!' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject('两次输入的密码不一致!');
                  },
                }),
              ]}
            >
              <Input.Password 
                prefix={<LockOutlined />} 
                placeholder="确认密码" 
                size="large"
              />
            </Form.Item>
            
            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                size="large"
                loading={loading}
              >
                注册
              </Button>
            </Form.Item>
          </Form>
          
          <div className="auth-footer">
            已有账号?{' '}
            <a className="auth-link" onClick={() => navigate('/login')}>
              立即登录
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register;